Toggle
Collapse Toggle
Button
Toggle content opens below button
Content in the collapsable element associated with a button.
Toggle content opens above button
Content in the collapsable element associated with a button.
Button Styled As Link
Toggle content opens below "link"
Content in the collapsable element associated with a link.
Toggle content opens above "link"
Content in the collapsable element associated with a link.
HTML
<!-- Button -->
<!-- content opening below button -->
<div class="collapse-group">
<noscript>
<style>
.collapse {
display: block;
}
</style>
</noscript>
<button class="button secondary collapsed" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Button with data-target</button>
<p class="collapse" id="collapseExample">Content in the collapsable element.</p>
</div>
<!-- content opening above button -->
<div class="collapse-group">
<noscript>
<style>
.collapse {
display: block;
}
</style>
</noscript>
<p class="collapse" id="collapseExample">Content in the collapsable element.</p>
<button class="button secondary collapsed" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Button with data-target</button>
</div>
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
<!-- Button styled as a link -->
<!-- content opening below "link" -->
<div class="collapse-group">
<noscript>
<style>
.collapse {
display: block;
}
</style>
</noscript>
<button class="link collapsed" data-toggle="collapse" data-target="#collapseLinkExample" aria-expanded="false" aria-controls="collapseLinkExample">Toggle "Link"</button>
<p class="collapse" id="collapseLinkExample">Content in the collapsable element associated with a link.</p>
</div>
<!-- content opening above "link" -->
<div class="collapse-group">
<noscript>
<style>
.collapse {
display: block;
}
</style>
</noscript>
<p class="collapse" id="collapseLinkExample">Content in the collapsable element associated with a link.</p>
<button class="link collapsed" data-toggle="collapse" data-target="#collapseLinkExample" aria-expanded="false" aria-controls="collapseLinkExample">Toggle "Link"</button>
</div>
Problem Being Solved
We need a clean way to collapse areas of heavy content that may not be immediately necessary to the user.
When to Use
The collapse component should be used for content that only a few users will need to access. It can also be used when a user only needs to see detailed information for one or two items out of a long list.
When Not to Use
Because accordions hide content, they should not be used when the content is pertinent to most audience members.
Formatting
- Use straight Bootstrap collapse html and classes.